<!-- 支付组件 -->
<template>
	<view class="pay-root">
		<view class="pay-box" v-show="payVisibility">
			<view class="pay-bg" @click="togglePayMask()"></view>
			<view class="pay-body animate__animated animate__zoomIn">
				<view class="pay-content">
					<view class="title">请确认账号无误后再充值</view>
					<view class="phone">账号：{{form['mobile']}}</view>
					<view class="type">
						<text class="icon">{{form['youXing']}}油型</text>
						<text class="mz">{{form['money']}}元 售价 {{form['sj']}}元</text>
					</view>
				</view>
				<view class="pay-footer clearfix">
					<view class="btn btn1" @click="togglePayMask()">取消</view>
					<view class="btn btn1" @click="payDefine()">确认</view>
				</view>
			</view>
		</view>
		<!-- 充值弹窗 -->
		<view class="recharge-box" v-show="rechargeVisibility">
			<view class="recharge-bg" @click="toggleRechargeMask()"></view>
			<view class="recharge-body animate__animated animate__fadeInUp">
				<view class="recharge-head">
					{{form['youXing']}}油型，面额<text class="imp">{{form['money']}}</text>元，售价<text
						class="imp">{{form['sj']}}</text>元
				</view>
				<view class="recharge-content">
					<view class="btn" v-for="(item,index) in rechargeList" :key="index" @click="pay(item.type)">
						<image class="icon" :src="item.icon"></image>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		name: "pay",
		data() {
			return {
				//购买弹窗显示
				"payVisibility": false,
				// 支付方式弹窗显示
				"rechargeVisibility": false,
				// 支付方式列表
				"rechargeList": [
					{
						"title": "微信支付",
						"icon": "../../static/images/weixin.png",
						"type": "wechat"
					},
					// {
					// 	"title": "支付宝支付",
					// 	"icon": "../../static/images/zhifubao.png",
					// 	"type": "alipay"
					// },
				],
				// 下单数据
				"form": {
					"mobile": "",//手机号
					"money": "",//面额
					"sj": "",//售价
					"youXing":"",//油型
					"youCode":"",//油号
					"stationCode":"",//加油站枪号
					"oilGun":"",//油枪号
				},
			};
		},
		created() {
			if (isWechat()) {
				this.rechargeList = this.rechargeList.splice(1, 1)
			}
		},
		methods: {
			open(obj = {}) {
				this.form = obj;
				this.togglePayMask();
			},
			payDefine() {
				// 点击确认 ，打开充值入口
				this.toggleRechargeMask()
			},
			togglePayMask() { //信息确认
				this.payVisibility = !this.payVisibility;
				this.rechargeVisibility = false;
			},
			toggleRechargeMask() { //选择支付
				this.payVisibility = false;
				this.rechargeVisibility = !this.rechargeVisibility;
			},
			pay(paytype = "wechat") { // 打开支付方式 alipay wechat
				let url =
					`http://sjms.cskx666.com/api/hjyapi/buy?money=${this.form['money']}&paytype=${paytype}&mobile=${this.form['mobile']}&stationCode=${this.form['stationCode']}&oilCode=${this.form['youCode']}&oilGun=${this.form['oilGun']}&ordertype=2`;
				window.location.href = url;
			},
		}
	}
</script>

<style scoped lang="scss">
	.pay-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;

		.pay-bg {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .4);
			position: relative;
			z-index: 1000;
		}

		.pay-body {
			width: 80%;
			position: absolute;
			top: 50%;
			left: 10%;
			z-index: 1001;
			background: #FFFFFF;
			border-radius: 20upx;
			overflow: hidden;
			transform: translateY(-70%);

			.pay-content {
				text-align: center;
				padding: 45upx 30upx 0;
				box-sizing: border-box;

				.title {
					font-size: 32upx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 38upx;
				}

				.phone {
					display: inline-block;
					background-color: #f4f3ed;
					color: #a74a57;
					padding: 8upx 20upx;
					font-size: 32upx;
					font-weight: bold;
					border-radius: 12upx;
				}

				.type {
					padding: 24upx 0 28upx;
					color: #828381;
					font-size: 28upx;
				}
			}

			.pay-footer {
				border-top: 2upx solid #cccccc;

				.btn {
					width: 50%;
					text-align: center;
					color: #333333;
					float: left;
					box-sizing: border-box;
					padding: 33upx 0;

					&.btn1 {
						border-right: 2upx solid #cccccc;
					}
				}
			}
		}
	}

	.recharge-box {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1003;

		.recharge-bg {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .4);
			position: relative;
			z-index: 1004;
		}

		.recharge-body {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 1005;
			background: #FFFFFF;
			border-top-left-radius: 35upx;
			border-top-right-radius: 35upx;
			overflow: hidden;

			.recharge-head {
				border-bottom: 4upx solid #f3f3f3;
				padding: 35upx 20upx 28upx;
				text-align: center;
				color: #333333;
				font-size: 32upx;
				box-sizing: border-box;
				font-weight: bold;

				.imp {
					color: #d06926;
				}
			}

			.recharge-content {
				padding: 32upx 0;
				display: flex;
				justify-content: center;

				.btn {
					width: 33.33%;
					text-align: center;

					.icon {
						width: 82upx;
						height: 82upx;
					}
				}
			}

		}
	}
</style>
